<template>
  <div class="city-group">
    <van-index-bar :sticky="false" :index-list="indexList" >
      <van-index-anchor index="热门" />
      <div class="list">
        <template v-for="(city, index) in groupData.hotCities">
          <div class="city" 
          @click="cityClick(city)">{{ city.cityName }}</div>
        </template>
      </div>

      <template v-for="(item, index) in groupData.cities" :key="index">
        <van-index-anchor :index="item.group" />
        <template v-for="(city, cityIndex) in item.cities" :key="cityIndex">
          <van-cell :title="city.cityName" @click="cityClick(city)"/>
        </template>
      </template>
    </van-index-bar>
  </div>
</template>
<script setup>

import useCityStore from "@/store/modules/city";
import {computed} from "vue"
import { useRouter } from "vue-router";
const props = defineProps({
  groupData: {
    type: Object,
    default: () => ({}),
  },
});

// 动态索引 #
const indexList = computed(()=>{
    const list =  props.groupData.cities.map(item => item.group)
    list.unshift("#")
    return list
})

// 热门城市点击事件
const router = useRouter()
const cityStore = useCityStore()
const cityClick = (value) =>{
    console.log(value);
    // 选中当前城市
    cityStore.currentCity = value
    // 返回上一级
    router.back()
}
</script>
<style lang="less" scoped>
/*局部css 支持css3 可以改变elementUI组件的样式 且组件样式调整只在本页面生效**/
/*主样式*/
.list {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding:10px;
  padding-right:25px;
  .city {
    width: 70px;
    height: 28px;
    border-radius: 14px;
    font-size: 12px;
    color: #000;
    text-align: center;
    line-height: 28px;
    background-color: #e2f09c;
    margin:6px 0;
  }
}
</style>
